<!DOCTYPE html>
<html lang="zh-CN" class="h-100">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品词云分析 - 跨境电商竞品分析系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/css/all.min.css">
    <style>
        :root {
            --color-primary: #2563eb;
            --color-primary-dark: #1d4ed8;
            --color-primary-light: #dbeafe;
            --color-secondary: #64748b;
            --color-success: #22c55e;
            --color-warning: #f59e0b;
            --color-error: #ef4444;
            --color-background: #f8fafc;
            --color-surface: #ffffff;
            --color-text: #1e293b;
            --color-text-light: #64748b;
            --color-border: #e2e8f0;
            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            --radius-sm: 0.375rem;
            --radius-md: 0.5rem;
            --radius-lg: 0.75rem;
            --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }
        
        /* 基础样式 */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            font-family: var(--font-sans);
            background-color: var(--color-background);
            color: var(--color-text);
        }
        
        /* 布局容器 */
        .app-container {
            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow: hidden;
        }
        
        .main-content {
            display: flex;
            flex: 1;
            overflow: hidden;
        }
        
        /* 侧边栏样式 */
        .sidebar {
            width: 320px;
            background-color: var(--color-surface);
            border-right: 1px solid var(--color-border);
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease;
        }
        
        .sidebar-header {
            padding: 1.25rem;
            border-bottom: 1px solid var(--color-border);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .sidebar-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--color-text);
            margin: 0;
        }
        
        .sidebar-content {
            flex: 1;
            overflow-y: auto;
            padding: 1rem;
        }
        
        /* 词云容器样式 */
        .wordcloud-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            background-color: var(--color-surface);
            position: relative;
            padding: 1.5rem;
            overflow-y: auto;
        }
        
        .wordcloud-header {
            padding: 1rem 0;
            margin-bottom: 1.5rem;
            border-bottom: 1px solid var(--color-border);
        }
        
        .wordcloud-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin: 0;
        }
        
        .wordcloud-description {
            color: var(--color-text-light);
            margin-top: 0.5rem;
        }
        
        .wordcloud-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }
        
        .wordcloud-card {
            background-color: var(--color-surface);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-md);
            overflow: hidden;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        
        .wordcloud-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        
        .wordcloud-card-header {
            padding: 1.25rem;
            background-color: var(--color-primary-light);
            border-bottom: 1px solid var(--color-border);
        }
        
        .wordcloud-card-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--color-primary);
            margin: 0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .wordcloud-card-body {
            padding: 1.5rem;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: white;
            min-height: 300px;
        }
        
        .wordcloud-image {
            max-width: 100%;
            max-height: 500px;
            object-fit: contain;
        }
        
        .wordcloud-placeholder {
            text-align: center;
            padding: 3rem;
            color: var(--color-text-light);
        }
        
        .wordcloud-placeholder i {
            font-size: 3rem;
            margin-bottom: 1rem;
            color: var(--color-border);
        }
        
        .wordcloud-controls {
            margin-bottom: 1.5rem;
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }
        
        .wordcloud-control-group {
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }
        
        .wordcloud-settings {
            background-color: var(--color-surface);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);
            padding: 1.25rem;
            margin-bottom: 1.5rem;
        }
        
        .wordcloud-settings-title {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--color-text);
        }
        
        .primary-button,
        .secondary-button {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            border: none;
            border-radius: var(--radius-md);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
            overflow: hidden;
        }
        
        .primary-button {
            background-color: var(--color-primary);
            color: white;
        }
        
        .primary-button:hover {
            background-color: var(--color-primary-dark);
        }
        
        .secondary-button {
            background-color: var(--color-background);
            color: var(--color-text);
            border: 1px solid var(--color-border);
        }
        
        .secondary-button:hover {
            background-color: var(--color-primary-light);
            color: var(--color-primary);
            border-color: var(--color-primary-light);
        }
        
        /* 产品选择器样式 */
        .product-selector {
            width: 100%;
            padding: 0.5rem;
            border-radius: var(--radius-md);
            border: 1px solid var(--color-border);
            background-color: var(--color-surface);
            color: var(--color-text);
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* 加载状态样式 */
        .loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid var(--color-primary-light);
            border-radius: 50%;
            border-top-color: var(--color-primary);
            animation: spin 1s linear infinite;
        }
        
        .loading-text {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--color-text-light);
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .sidebar {
                position: fixed;
                left: 0;
                top: 0;
                bottom: 0;
                z-index: 100;
                transform: translateX(-100%);
            }
            
            .sidebar.active {
                transform: translateX(0);
            }
            
            .wordcloud-container {
                width: 100%;
            }
        }
    </style>
</head>
<body class="d-flex flex-column h-100">
    <div class="app-container">
        <nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom">
            <div class="container-fluid">
                <a class="navbar-brand" href="/">跨境电商竞品分析系统</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav me-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="/products">产品列表</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/create-product">创建产品</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/compare-products">产品对比</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/chat">AI 助手</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="/wordcloud">词云分析</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="main-content">
            <aside class="sidebar" id="sidebar">
                <div class="sidebar-header">
                    <h3 class="sidebar-title">产品词云</h3>
                    <button class="toolbar-button" id="sidebarToggle">
                        <i class="fas fa-bars"></i>
                    </button>
                </div>

                <div class="sidebar-content">
                    <!-- 产品选择部分 -->
                    <section class="sidebar-section">
                        <h4 class="section-title">产品选择</h4>
                        <div class="mb-3">
                            <select id="productSelector" class="product-selector">
                                <option value="">-- 请选择产品 --</option>
                            </select>
                        </div>
                        <button id="generateButton" class="primary-button w-100">
                            <i class="fas fa-sync-alt"></i> 生成词云
                        </button>
                    </section>

                    <!-- 词云设置 -->
                    <section class="sidebar-section mt-4">
                        <h4 class="section-title">词云设置</h4>
                        <div class="mb-3">
                            <label for="maxWords" class="form-label">最大词数量</label>
                            <input type="range" class="form-range" id="maxWords" min="20" max="200" value="100">
                            <div class="d-flex justify-content-between">
                                <small>20</small>
                                <small id="maxWordsValue">100</small>
                                <small>200</small>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="colorScheme" class="form-label">颜色方案</label>
                            <select id="colorScheme" class="product-selector">
                                <option value="default">默认蓝色系</option>
                                <option value="colorful">多彩色系</option>
                                <option value="warm">暖色系</option>
                                <option value="cool">冷色系</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="wordcloudShape" class="form-label">词云形状</label>
                            <select id="wordcloudShape" class="product-selector">
                                <option value="circle">圆形</option>
                                <option value="rectangle" selected>矩形</option>
                            </select>
                        </div>
                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="forceRegenerate">
                            <label class="form-check-label" for="forceRegenerate">强制重新生成</label>
                            <small class="form-text text-muted d-block">选中此项会重新生成词云，不论是否已存在</small>
                        </div>
                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="forceReanalyze">
                            <label class="form-check-label" for="forceReanalyze">强制重新分析</label>
                            <small class="form-text text-muted d-block">选中此项会强制进行新的AI分析</small>
                        </div>
                        <button id="analyzeButton" class="secondary-button w-100 mt-3">
                            <i class="fas fa-brain"></i> AI 分析词云
                        </button>
                    </section>
                </div>
            </aside>

            <main class="wordcloud-container">
                <header class="wordcloud-header">
                    <h2 class="wordcloud-title">产品词云分析</h2>
                    <p class="wordcloud-description">通过词云直观展示产品文本数据中的关键词，快速识别重要特性和市场定位。</p>
                </header>

                <div class="wordcloud-content">
                    <div class="wordcloud-card" id="wordcloudCard">
                        <div class="wordcloud-card-header">
                            <h3 class="wordcloud-card-title">
                                <i class="fas fa-cloud"></i>
                                <span id="wordcloudTitle">产品词云</span>
                            </h3>
                        </div>
                        <div class="wordcloud-card-body" id="wordcloudContainer">
                            <div class="wordcloud-placeholder" id="wordcloudPlaceholder">
                                <i class="fas fa-cloud"></i>
                                <p>请从侧边栏选择产品并生成词云</p>
                            </div>
                            <img id="wordcloudImage" class="wordcloud-image" style="display: none;" />
                            <div id="wordcloudLoading" class="loading-text" style="display: none;">
                                <div class="loading-spinner"></div>
                                <span>正在生成词云...</span>
                            </div>
                        </div>
                    </div>

                    <!-- AI词云分析结果卡片 -->
                    <div class="wordcloud-card" id="analysisCard" style="display: none;">
                        <div class="wordcloud-card-header">
                            <h3 class="wordcloud-card-title">
                                <i class="fas fa-brain"></i>
                                <span id="analysisTitle">AI 词云分析</span>
                            </h3>
                        </div>
                        <div class="wordcloud-card-body" id="analysisContainer">
                            <div id="analysisLoading" class="loading-text" style="display: none;">
                                <div class="loading-spinner"></div>
                                <span>正在分析词云...</span>
                            </div>
                            <div id="analysisContent" style="display: none; width: 100%;">
                                <!-- 高频词展示 -->
                                <div class="mb-4">
                                    <h4 class="fw-bold mb-3">高频关键词</h4>
                                    <div id="topKeywords" class="d-flex flex-wrap gap-2"></div>
                                </div>
                                
                                <!-- 关键词分组 -->
                                <div id="keywordGroups" class="mb-4"></div>
                                
                                <!-- 分析摘要 -->
                                <div class="mb-4">
                                    <h4 class="fw-bold mb-3">分析摘要</h4>
                                    <div id="analysisSummary" class="card p-3 bg-light"></div>
                                </div>
                                
                                <!-- 营销建议 -->
                                <div class="mb-4">
                                    <h4 class="fw-bold mb-3">营销建议</h4>
                                    <ul id="marketingSuggestions" class="list-group"></ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const productSelector = document.getElementById('productSelector');
            const generateButton = document.getElementById('generateButton');
            const analyzeButton = document.getElementById('analyzeButton');
            const wordcloudImage = document.getElementById('wordcloudImage');
            const wordcloudTitle = document.getElementById('wordcloudTitle');
            const wordcloudPlaceholder = document.getElementById('wordcloudPlaceholder');
            const wordcloudLoading = document.getElementById('wordcloudLoading');
            const analysisCard = document.getElementById('analysisCard');
            const analysisLoading = document.getElementById('analysisLoading');
            const analysisContent = document.getElementById('analysisContent');
            const maxWordsSlider = document.getElementById('maxWords');
            const maxWordsValue = document.getElementById('maxWordsValue');
            const colorScheme = document.getElementById('colorScheme');
            const wordcloudShape = document.getElementById('wordcloudShape');
            const sidebarToggle = document.getElementById('sidebarToggle');
            const sidebar = document.getElementById('sidebar');
            
            // 初始化
            loadProducts();
            initSidebar();
            
            // 滑块值显示
            maxWordsSlider.addEventListener('input', function() {
                maxWordsValue.textContent = this.value;
            });
            
            // 生成词云按钮事件
            generateButton.addEventListener('click', function() {
                const productId = productSelector.value;
                if (!productId) {
                    alert('请先选择一个产品');
                    return;
                }
                
                generateWordcloud(productId);
            });
            
            // 分析词云按钮事件
            analyzeButton.addEventListener('click', function() {
                const productId = productSelector.value;
                if (!productId) {
                    alert('请先选择一个产品');
                    return;
                }
                
                analyzeWordcloud(productId);
            });
            
            // 侧边栏切换
            function initSidebar() {
                if (sidebarToggle) {
                    sidebarToggle.addEventListener('click', () => {
                        sidebar.classList.toggle('collapsed');
                    });
                }
            }
            
            // 加载产品列表
            async function loadProducts() {
                try {
                    // 尝试不同的API路径
                    const apiPaths = ['/api/products/static', '/api/products', '/api/products/products'];
                    
                    for (const path of apiPaths) {
                        try {
                            console.log(`尝试从 ${path} 获取产品`);
                            const response = await fetch(path);
                            
                            if (!response.ok) {
                                console.warn(`${path} 返回状态码: ${response.status}`);
                                continue;
                            }
                            
                            const data = await response.json();
                            let products = [];
                            
                            // 处理不同的返回格式
                            if (Array.isArray(data)) {
                                products = data;
                            } else if (data && typeof data === 'object') {
                                if (Array.isArray(data.products)) {
                                    products = data.products;
                                } else if (Object.keys(data).length > 0) {
                                    // 假设是对象列表
                                    products = Object.values(data);
                                }
                            }
                            
                            if (products && products.length > 0) {
                                // 清空选择器
                                productSelector.innerHTML = '<option value="">-- 请选择产品 --</option>';
                                
                                // 添加产品选项
                                products.forEach(product => {
                                    const productId = product.id || product._id || Object.keys(product)[0];
                                    const productName = product.name || (productId ? productId.split('_')[0] : '未命名产品');
                                    
                                    const option = document.createElement('option');
                                    option.value = productId;
                                    option.textContent = productName;
                                    productSelector.appendChild(option);
                                });
                                
                                break;
                            }
                        } catch (err) {
                            console.error(`从 ${path} 获取产品失败:`, err);
                        }
                    }
                } catch (error) {
                    console.error('加载产品失败:', error);
                }
            }
            
            // 生成词云
            async function generateWordcloud(productId) {
                try {
                    // 显示加载状态
                    wordcloudPlaceholder.style.display = 'none';
                    wordcloudImage.style.display = 'none';
                    wordcloudLoading.style.display = 'flex';
                    
                    // 获取产品名称
                    const productName = productSelector.options[productSelector.selectedIndex].text;
                    wordcloudTitle.textContent = `${productName} 词云分析`;
                    
                    // 获取强制重新生成设置
                    const forceRegenerate = document.getElementById('forceRegenerate').checked;
                    
                    // 构建API请求参数
                    const params = new URLSearchParams({
                        max_words: maxWordsSlider.value,
                        color_scheme: colorScheme.value,
                        shape: wordcloudShape.value,
                        force_regenerate: forceRegenerate
                    });
                    
                    // 发送请求
                    const response = await fetch(`/api/products/${productId}/wordcloud?${params}`);
                    
                    if (!response.ok) {
                        throw new Error('生成词云失败');
                    }
                    
                    const result = await response.json();
                    
                    if (result.status === 'error') {
                        throw new Error(result.message || '生成词云时出错');
                    }
                    
                    // 显示词云图片
                    wordcloudImage.src = result.image_url;
                    wordcloudImage.alt = `${productName} 词云`;
                    
                    // 如果是从缓存加载的，显示提示信息
                    if (result.is_cached) {
                        const cacheInfo = document.createElement('div');
                        cacheInfo.className = 'text-muted mt-2 text-center';
                        cacheInfo.innerHTML = '<small><i class="fas fa-info-circle"></i> 已从缓存加载词云图</small>';
                        wordcloudContainer.appendChild(cacheInfo);
                        
                        // 3秒后移除提示信息
                        setTimeout(() => {
                            cacheInfo.remove();
                        }, 3000);
                    }
                    
                    // 隐藏加载状态，显示图片
                    wordcloudLoading.style.display = 'none';
                    wordcloudImage.style.display = 'block';
                    
                } catch (error) {
                    console.error('生成词云失败:', error);
                    wordcloudLoading.style.display = 'none';
                    wordcloudPlaceholder.style.display = 'block';
                    wordcloudPlaceholder.innerHTML = `
                        <i class="fas fa-exclamation-circle text-danger"></i>
                        <p>生成词云失败: ${error.message}</p>
                        <button class="secondary-button" onclick="location.reload()">
                            <i class="fas fa-redo"></i> 重试
                        </button>
                    `;
                }
            }
            
            // 分析词云
            async function analyzeWordcloud(productId) {
                try {
                    // 隐藏之前的分析结果，显示加载状态
                    analysisCard.style.display = 'block';
                    analysisContent.style.display = 'none';
                    analysisLoading.style.display = 'flex';
                    
                    // 获取产品名称
                    const productName = productSelector.options[productSelector.selectedIndex].text;
                    
                    // 获取强制重新分析设置
                    const forceReanalyze = document.getElementById('forceReanalyze').checked;
                    
                    // 发送请求
                    const params = new URLSearchParams({
                        force_regenerate: forceReanalyze
                    });
                    
                    const response = await fetch(`/api/products/${productId}/wordcloud/analyze?${params}`);
                    
                    if (!response.ok) {
                        throw new Error('分析词云失败');
                    }
                    
                    const result = await response.json();
                    
                    if (result.status === 'error') {
                        throw new Error(result.message || '分析词云时出错');
                    }
                    
                    // 如果是从缓存加载的，显示提示信息
                    if (result.is_cached) {
                        const cacheInfo = document.createElement('div');
                        cacheInfo.className = 'alert alert-info mt-2 mb-3';
                        cacheInfo.innerHTML = '<i class="fas fa-info-circle me-2"></i> 已从缓存加载词云分析结果';
                        analysisContent.prepend(cacheInfo);
                        
                        // 5秒后移除提示信息
                        setTimeout(() => {
                            cacheInfo.remove();
                        }, 5000);
                    }
                    
                    // 显示分析结果
                    displayAnalysisResult(result.analysis);
                    
                    // 隐藏加载状态，显示分析内容
                    analysisLoading.style.display = 'none';
                    analysisContent.style.display = 'block';
                    
                } catch (error) {
                    console.error('分析词云失败:', error);
                    analysisLoading.style.display = 'none';
                    analysisContent.style.display = 'block';
                    analysisContent.innerHTML = `
                        <div class="text-center py-4">
                            <i class="fas fa-exclamation-circle text-danger fs-1 mb-3"></i>
                            <p>分析词云失败: ${error.message}</p>
                            <button class="secondary-button" onclick="analyzeWordcloud('${productId}')">
                                <i class="fas fa-redo"></i> 重试
                            </button>
                        </div>
                    `;
                }
            }
            
            // 显示分析结果
            function displayAnalysisResult(analysis) {
                // 清空现有内容
                document.getElementById('topKeywords').innerHTML = '';
                document.getElementById('keywordGroups').innerHTML = '';
                document.getElementById('analysisSummary').innerHTML = '';
                document.getElementById('marketingSuggestions').innerHTML = '';
                
                // 高频关键词
                const topKeywordsContainer = document.getElementById('topKeywords');
                analysis.top_keywords.forEach(([word, count]) => {
                    const badge = document.createElement('span');
                    badge.className = 'badge bg-primary p-2 fs-6';
                    badge.innerHTML = `${word} <span class="badge bg-light text-dark">${count}</span>`;
                    topKeywordsContainer.appendChild(badge);
                });
                
                // 关键词分组
                const keywordGroupsContainer = document.getElementById('keywordGroups');
                analysis.keyword_groups.forEach(group => {
                    if (group.keywords.length === 0) return;
                    
                    const groupDiv = document.createElement('div');
                    groupDiv.className = 'mb-3';
                    
                    const groupTitle = document.createElement('h5');
                    groupTitle.className = 'fw-bold mb-2';
                    groupTitle.textContent = group.group_name;
                    
                    const groupDesc = document.createElement('p');
                    groupDesc.className = 'small text-muted mb-2';
                    groupDesc.textContent = group.description;
                    
                    const keywordsDiv = document.createElement('div');
                    keywordsDiv.className = 'd-flex flex-wrap gap-2';
                    
                    group.keywords.forEach(word => {
                        const badge = document.createElement('span');
                        badge.className = 'badge bg-info p-2';
                        badge.textContent = word;
                        keywordsDiv.appendChild(badge);
                    });
                    
                    groupDiv.appendChild(groupTitle);
                    groupDiv.appendChild(groupDesc);
                    groupDiv.appendChild(keywordsDiv);
                    keywordGroupsContainer.appendChild(groupDiv);
                });
                
                // 分析摘要
                document.getElementById('analysisSummary').textContent = analysis.summary;
                
                // 营销建议
                const suggestionsContainer = document.getElementById('marketingSuggestions');
                analysis.marketing_suggestions.forEach(suggestion => {
                    const li = document.createElement('li');
                    li.className = 'list-group-item';
                    
                    // 处理Markdown格式 (简单处理粗体和斜体)
                    let formattedText = suggestion
                        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') // 处理粗体 **text**
                        .replace(/\*(.*?)\*/g, '<em>$1</em>')             // 处理斜体 *text*
                        .replace(/`(.*?)`/g, '<code>$1</code>')           // 处理代码 `code`
                        .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank">$1</a>') // 处理链接 [text](url)
                        .replace(/\n/g, '<br>');                          // 处理换行
                    
                    li.innerHTML = `<i class="fas fa-lightbulb text-warning me-2"></i> ${formattedText}`;
                    suggestionsContainer.appendChild(li);
                });
            }
        });
    </script>
</body>
</html> 